<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--事项统计界面，每个人都可以看到。  杨卓霖-->
<head>
    <meta charset="UTF-8">
    <title>事项统计</title>
    <!-- load css -->
    <link rel="stylesheet" type="text/css" href="myconfig/layui/css/layui.css" media="all">
    <!--导入js文件-->
    <script type="text/javascript" src="jsplug/echarts.min.js"></script>
    <script type="text/javascript" src="myconfig/bootstrap/js/jquery.js"></script>
    <script type="text/javascript" src="myconfig/layui/layui.js"></script>
    <style>
        #div1{
            border: 1px solid black;
            height: 707px;
            width: 1404px;
            float: left;
            margin-left: 13px;
        }
        #div2{
            border: 1px solid black;
            height:700px;
            width: 700px;
            float: left;
        }
        #div3{
            border: 1px solid black;
            height: 700px;
            width: 700px;
            float: left;
        }
    </style>
</head>
<body>
<div id="div1">
    <div id="div2"></div>
    <div id="div3"></div>
</div>

<script th:inline="none">
   // var result ;
      var data1 = new Array();
   $(document).ready(function(){
       var myChart1 = echarts.init(document.getElementById('div2'));
       // 指定图表的配置项和数据
       option = {
           backgroundColor: '#2c343c',

           title: {
               text: '按区域事项分:',
               left: 'center',
               top: 20,
               textStyle: {
                   color: '#ccc'
               }
           },

           tooltip : {
               trigger: 'item',
               formatter: "{a} <br/>{b} : {c} ({d}%)"
           },

           visualMap: {
               show: false,
               min: 80,
               max: 600,
               inRange: {
                   colorLightness: [0, 1]
               }
           },
           series : [

               {
                   name:'访问来源',
                   type:'pie',
                   radius : '55%',
                   center: ['50%', '50%'],
                   data : (function(){
                       var arr=[];
                       $.ajax({
                           type : "post",
                           async : false, //同步执行
                           url:  'sx/queryCountByArea',
                           data : {},
                           dataType : "json", //返回数据形式为json
                           success : function(result) {
                               if (result) {
                                   for(var i=0;i<result.length;i++){
                                       // console.log(result[i].departmentName);
                                       arr.push({
                                           name : result[i].areaName,
                                           value:result[i].count,
                                       });
                                   }
                               }

                           },
                           error : function(errorMsg) {
                               alert("不好意思,图表请求数据失败啦!");
                               myChart.hideLoading();
                           }
                       })
                       return arr;
                   })(),
                            roseType: 'radius',
                            label: {
                                normal: {
                                    textStyle: {
                                        color: 'rgba(255, 255, 255, 0.3)'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    lineStyle: {
                                        color: 'rgba(255, 255, 255, 0.3)'
                                    },
                                    smooth: 0.2,
                                    length: 10,
                                    length2: 20
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#c23531',
                                    shadowBlur: 200,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 200;
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart1.setOption(option);
    });
    </script>
<script th:inline="none">
    // var result ;
    var seriesdata = new Array();
    $(document).ready(function(){
                var myChart2 = echarts.init(document.getElementById('div3'));
                // 指定图表的配置项和数据
                option = {
                    backgroundColor: '#2c343c',

                    title: {
                        text: '按部门事项分:',
                        left: 'center',
                        top: 20,
                        textStyle: {
                            color: '#ccc'
                        }
                    },

                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },

                    visualMap: {
                        show: false,
                        min: 80,
                        max: 600,
                        inRange: {
                            colorLightness: [0, 1]
                        }
                    },
                       series : [

                         {
                             name:'访问来源',
                             type:'pie',
                             radius : '55%',
                             center: ['50%', '50%'],
                             data : (function(){
                                 var arr=[];
                                 $.ajax({
                                     type : "post",
                                     async : false, //同步执行
                                     url:'sx/queryCountByDepartment',
                                     data : {},
                                     dataType : "json", //返回数据形式为json
                                     success : function(result) {
                                         if (result) {
                                             for(var i=0;i<result.length;i++){
                                                // console.log(result[i].departmentName);
                                                 arr.push({
                                                     name : result[i].departmentName,
                                                     value:result[i].count,
                                                 });
                                             }
                                         }

                                     },
                                     error : function(errorMsg) {
                                         alert("不好意思,图表请求数据失败啦!");
                                         myChart.hideLoading();
                                     }
                                 })
                                 return arr;
                             })(),
                            roseType: 'radius',
                            label: {
                                normal: {
                                    textStyle: {
                                        color: 'rgba(255, 255, 255, 0.3)'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    lineStyle: {
                                        color: 'rgba(255, 255, 255, 0.3)'
                                    },
                                    smooth: 0.2,
                                    length: 10,
                                    length2: 20
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#c23531',
                                    shadowBlur: 200,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 200;
                            }
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart2.setOption(option);
            });

</script>
</body>
</html>